// ignore_for_file: must_be_immutable

import 'package:aitao_flutter/common_ui/back_nav.dart';
import 'package:aitao_flutter/common_ui/confirm_btn.dart';
import 'package:aitao_flutter/const/common_const.dart';
import 'package:aitao_flutter/mine/controller/recharge_controller.dart';
import 'package:aitao_flutter/res/r.dart';
import 'package:aitao_flutter/style/border_style.dart';
import 'package:aitao_flutter/style/box_style.dart';
import 'package:aitao_flutter/style/color_style.dart';
import 'package:aitao_flutter/style/edgeInsets_style.dart';
import 'package:aitao_flutter/style/radius_style.dart';
import 'package:aitao_flutter/style/text_style.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../model/recharge_model.dart';
import '../../routes/routes.dart';

class RechargePage extends StatelessWidget {
  RechargePage({super.key});
  RechargeController controller = Get.put(RechargeController());
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorStyle.themeColor,
      appBar: BackNavigation(
        backArrowColor: ColorStyle.whiteColor,
        backGroundColor: ColorStyle.themeColor,
        rightTitle: '充值记录',
        rightTitleColor: ColorStyle.whiteColor,
        title: '',
        rightBtnCallBack: () {
          debugPrint('充值记录');
          Get.toNamed(Routes.billingDetailPage);
        },
      ),
      body: GetBuilder<RechargeController>(
        builder: (controller) {
          return controller.userData == null
              ? const Center(
                  child: Text('加载中...'),
                )
              : CustomScrollView(
                  slivers: [
                    _headerWidget(),
                    _rechargeListView(),
                    _bottomWidget()
                  ],
                );
        },
      ),
    );
  }

  Widget _bottomWidget() {
    return SliverToBoxAdapter(
      child: Container(
        color: ColorStyle.whiteColor,
        padding: EdgeInsetsStyle.customMargin(20, 14, 20, 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '支付方式',
              style: Styles.normalText_16,
            ),
            Box.vBox10,
            Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: controller.channels.asMap().entries.map((e) {
                  return _payItemWidget(e.key, e.value);
                }).toList()),
            Box.vBox10,
            Row(
              children: [
                Container(
                  margin: EdgeInsetsStyle.only(left: 15),
                  padding: EdgeInsetsStyle.edgeInsets(7, 2),
                  decoration: BoxDecoration(
                      borderRadius: RadiusStyle.radiusAll(11.5),
                      color: ColorStyle.setColor(0xFFF53030)),
                  child: Text(
                    '推荐',
                    style: Styles.whiteText_11,
                  ),
                ),
                Box.hBox(7),
                Text(
                  '支付宝充值更多优惠',
                  style: Styles.normalText_12,
                )
              ],
            ),
            Box.vBox15,
            ConfirmButton(
              borderRaduis: 25,
              fontSize: 18,
              title: '充值',
              titleColor: ColorStyle.whiteColor,
              backGroundColor: ColorStyle.themeColor,
              callBack: () {
                controller.rechargeClick();
              },
            ),
            Box.vBox20,
            Align(
                alignment: Alignment.center,
                child: Text(
                  '平台温馨提示您理性消费',
                  style: TextStyle(
                      fontSize: 11, color: ColorStyle.setColor(0xFFFC3D2D)),
                ))
          ],
        ),
      ),
    );
  }

  Widget _payItemWidget(int index, RechargeModel model) {
    return GestureDetector(
      child: Container(
        margin: EdgeInsetsStyle.only(right: 10),
        padding: EdgeInsetsStyle.edgeInsets(19, 8),
        decoration: BoxDecoration(
            color: ColorStyle.f3f3f3Color,
            borderRadius: RadiusStyle.radiusAll(6),
            border: BoardStyle.borderAll(
                1,
                controller.channelIndex == index
                    ? ColorStyle.themeColor
                    : ColorStyle.f3f3f3Color)),
        child: Row(
          children: [
            Image.asset(model.channelName == '支付宝'
                ? ImagePath.assetsPayZfb
                : ImagePath.assetsPayWx),
            Box.hBox12,
            Text(
              model.channelName ?? '',
              style: Styles.normalText_16,
            )
          ],
        ),
      ),
      onTap: () {
        controller.selectPayMentType(index);
      },
    );
  }

  Widget _rechargeListView() {
    return SliverToBoxAdapter(
      child: Container(
        color: ColorStyle.whiteColor,
        padding: EdgeInsetsStyle.customMargin(20, 14, 20, 0),
        child: GridView.builder(
          physics: const NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              childAspectRatio: 1.1,
              mainAxisSpacing: 12,
              crossAxisSpacing: 18,
              crossAxisCount: 3),
          itemBuilder: (context, index) {
            return _rechargeItemWidget(index);
          },
          itemCount: controller.getSelectGoodsList().length,
        ),
      ),
    );
  }

  Widget _rechargeItemWidget(int index) {
    GoodsItem item = controller.getSelectGoodsList()[index];
    return GestureDetector(
      child: Container(
        padding: EdgeInsetsStyle.only(top: 8),
        decoration: BoxDecoration(
            color: controller.channelItemIndex == index
                ? ColorStyle.setColor(0xFFFBF5FF)
                : ColorStyle.whiteColor,
            borderRadius: RadiusStyle.radiusAll(6),
            border: BoardStyle.borderAll(
                1,
                controller.channelItemIndex == index
                    ? ColorStyle.themeColor
                    : ColorStyle.setColor(0xFFE2E0E0))),
        child: Column(
          children: [
            Text(
              '${item.amount}阳光',
              style: controller.channelItemIndex == index
                  ? Styles.mainText_12
                  : Styles.normalText_12,
            ),
            Box.vBox5,
            Text(
              '￥${item.price}',
              style: controller.channelItemIndex == index
                  ? Styles.mainText_12
                  : Styles.normalText_12,
            ),
            Box.vBox5,
            Text(
              item.remark ?? '',
              style: controller.channelItemIndex == index
                  ? Styles.mainText_12
                  : Styles.normalText_12,
            ),
          ],
        ),
      ),
      onTap: () {
        controller.selectItem(index);
      },
    );
  }

  Widget _headerWidget() {
    return SliverToBoxAdapter(
      child: Container(
        padding: EdgeInsetsStyle.only(bottom: 15),
        color: ColorStyle.themeColor,
        child: Column(
          children: [
            _headerTopTips(),
            Box.vBox10,
            Text(
              controller.coin.toString(),
              style: Styles.whiteText_30,
            ),
            Box.vBox5,
            Text('剩余${CommonStringConst.manCoinName}',
                style: Styles.whiteText_16),
          ],
        ),
      ),
    );
  }

  Widget _headerTopTips() {
    return Align(
      alignment: Alignment.centerRight,
      child: Container(
        alignment: Alignment.center,
        width: 155.w,
        decoration: BoxDecoration(
            borderRadius: RadiusStyle.radiusAll(22),
            color: ColorStyle.orangeColor),
        padding: EdgeInsetsStyle.edgeInsets(21, 3),
        child: Text(
          '成为会员充值单笔最多送7218阳光',
          style: Styles.whiteText_12,
        ),
      ),
    );
  }
}
